<template>
    <div class="card-main">
        <div class="card-list">
            <div class="card-item" v-for="(data,index) in dataList" :key="index" @click="dataHandler(index,data)">
                <div class="card-cover">
                    <el-image :src="data.cover"></el-image>
                </div>
                <div class="card-title text-display-a-line">
                    {{ data.title }}
                </div>

            </div>
            

        </div>
        <div class="comments-head" @click="moreHandler">
            <p>查看更多<i class="el-icon-right"></i></p>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    props:['dataList'],
    methods:{
        dataHandler(index,data){
            this.$emit('handler',index,data);
        },
        moreHandler(){
            this.$emit('more');
        }

    },
    components:{
        

    }

}
</script>

<style lang="scss" scoped>
 .text-display-a-line{
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
		white-space: nowrap;
		width: 100%;
		-webkit-line-clamp: 1;
		-webkit-box-orient:vrtical;
		/*  overflow : hidden;
		 text-overflow : ellipsis;
		 display :   -webkit-box;
		 -webkit-line-clamp :2; 
		-webkit-box-orient :vertical; */
	}
.comments-head{
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #FF6900;
    text-transform: uppercase;
    letter-spacing: 4px;
    animation: fadeInLeft 1s;
    cursor: pointer;
}
.card-main{
    width: 100%;
    padding-top: 20px;
}
.card-list{
    width: 100%;
}
.card-item{
    display: flex;
    justify-content: center;
}
.card-item:hover{
    cursor: pointer;
}
.card-title{
    width: 80%;
    padding-left: 20px;
}
.card-cover{
    width: 20%;
}

</style>